<template>
    <div id="payment">
        <div class="row">
            <div class="col-md-12">
                <condition :data="condition" @getCondition="getCondition"></condition>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <el-table :data="logs" size="small" border style="width: 100%">
                    <el-table-column fixed sortable align="center" prop="State" label="Severity" width="100">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.Severity == 'Information'" type="info">INFO</el-tag>
                            <el-tag v-if="scope.row.Severity == 'Error'" type="danger">ERROR</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed align="center" prop="Title" label="Title" width="250"></el-table-column>
                    <el-table-column fixed align="center" label="Timestamp" width="150">
                        <template slot-scope="scope">
                            <span>{{scope.row.Timestamp|Localtime}}</span>
                        </template>                        
                    </el-table-column>
                    <el-table-column fixed align="left" prop="Message" label="Message"></el-table-column>
                    <el-table-column fixed="right" align="center" label="Detail" width="100">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="formattedMessage=JSON.parse(scope.row.FormattedMessage); dialogVisible=true;">详细信息</el-button>
                        </template>
                    </el-table-column>                    
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="pageCount"></el-pagination>
            </div>
        </div>
        <div>
            <el-dialog title="详细信息" width="75%" :visible.sync="dialogVisible">
                <div>
                    <pre style="max-height: 300px;">{{JSON.stringify(formattedMessage, null, 3)}}</pre>
                    <pre style="max-height: 300px;">{{logmsg}}</pre>
                </div>
            </el-dialog>  
        </div>
    </div>
</template>

<script>

import {LocaltimeFormat, DAYS} from 'web/utils.js';
import Condition from './condition.vue';

export default {
    data() {
        return {
            logs: [],
            pageCount: 0,
            pageSize: 10,            
            condition: null,
            formattedMessage: {},
            dialogVisible: false
        }
    },
    components: {
        Condition
    },
    filters: {
        Localtime: LocaltimeFormat
    },
    computed: {
        logmsg() {
            if(!this.formattedMessage.Message) {
                return '';
            }
            let msg = this.formattedMessage.Message;
            if((msg.startsWith('{') && msg.endsWith('}')) || 
               (msg.startsWith('[') && msg.endsWith(']'))) {
                return JSON.stringify(JSON.parse(msg), null, 3);
            }
            return msg;
        }
    },
    mounted() {
        // 初始加载日志数据
        this.condition = {
            Severities: ['Error'],
            LogTime0: DAYS.Today,
            LogTime1: DAYS.Tomorrow
        };
        this.query(this.condition, 1, this.pageSize);
    },
    methods: {

        // 处理页面索引变化消息
        handleCurrentChange(val) {
            this.$LogService.QueryLogs(this.condition, val, this.pageSize)
                .then(ret => {
                    this.logs = ret;
                });            
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.$LogService.QueryLogs(this.condition, 1, this.pageSize)
                .then(ret => {
                    this.logs = ret;
                }); 
        },

        // 获取查询条件并进行查询
        getCondition(condition) {
            this.condition = condition;
            this.query(this.condition);
        },

        // 条件查询
        query(condition) {
            Promise.all([
                this.$LogService.QueryLogsCount(condition),
                this.$LogService.QueryLogs(condition, 1, this.pageSize)
            ]).then(ret => {
                this.pageCount = ret[0];
                this.logs = ret[1];
            });
        },        
    }
}
</script>

<style>

</style>
